/*
 * 图形栏
 * @Author: zhangshubin
 * @Date: 2023-12-06 09:14:28
 * @Last Modified by: zhangshubin
 * @Last Modified time: 2023-12-26 13:35:48
 */

import React, { useEffect, useRef, useState } from 'react'

import { Collapse, Tooltip } from 'antd'

import './index.less'
import Editor from '../Editor'
import GraphUtil from '@/util/GraphUtil'
import { mxCell as mCell, mxGraph } from 'mxgraph'
import BasicPalette from './palettes/Basic'

import Thumb from './components/Thumb'
import Dynamic from './palettes/Dynamic'
import Device from './palettes/Device'

interface ISidebarProps {
  editor: Editor
}

export default function Sidebar(props: ISidebarProps) {
  const [graph, setGraph] = useState<mxGraph>()
  useEffect(() => {
    handleSidebarItems()
  }, [props.editor])

  useEffect(() => {}, [])

  const handleSidebarItems = () => {
    const { editor } = props

    if (editor) {
      const graph = GraphUtil.createTemporaryGraph(editor.graph.getStylesheet())
      setGraph(graph)
    }
  }

  const onChange = () => {
    setTimeout(() => {
      handleSidebarItems()
    }, 1000)
  }

  const items = [
    {
      key: 'basic',
      label: <span className="font-size-13px">基础图形</span>,
      children: BasicPalette.data.map((shape) => {
        return graph ? <Thumb graph={graph} shape={shape} key={shape.label} /> : null
      })
    },
    {
      key: 'dynamic',
      label: <span className="font-size-13px">动态</span>,
      children: Dynamic.data.map((shape) => {
        return graph ? <Thumb graph={graph} shape={shape} key={shape.label} /> : null
      })
    },
    {
      key: 'device',
      label: <span className="font-size-13px">设备</span>,
      children: Device.data.map((shape) => {
        return graph ? <Thumb graph={graph} shape={shape} key={shape.label} /> : null
      })
    }
  ]
  return (
    <div className="J_Sidebar_Container sidebar-container">
      {graph ? (
        <Collapse
          bordered={false}
          items={items}
          defaultActiveKey={['basic', 'dynamic', 'device']}
          onChange={() => {
            onChange()
          }}
        />
      ) : null}
    </div>
  )
}
